<template>
  <div style="padding: 20px;min-height: 87.5vh">
    <a-tabs
        v-model:activeKey="activeKey"
        @tabClick="handleClick"
    >
      <a-tab-pane :key="tabItem.key" v-for="(tabItem) in tabCards">
        <template #tab>
          <span :class="tabItem.color">{{ tabItem.name }}</span>
        </template>
        <!-- 搜索 筛选 -->
        <div class="mb_24 box">
          <div class="global_float_right">
            <a-input-search v-model:value="pageInfo.orderSn" enter-button class="searchClass" @search="listOrder"
                            placeholder="请输入订单号搜索"/>

          </div>
        </div>
        <a-spin :spinning="spinShow">
          <!-- 订单列表 -->
          <EmptyData v-if="orderList?.length === 0"/>
          <div class="order-content" v-else>
            <div
                class="order-list"
                v-for="(order, onderIndex) in orderList"
                :key="onderIndex"
            >
              <div class="order-header">
                <div>
                  <div>{{ (order.orderStatus == 1 || order.orderStatus == 2) ? '交易完成' : order.orderStatus_dictText }}</div>
                  <div>
                    订单号：{{ order.orderSn }} &nbsp; &nbsp; &nbsp; 下单时间：{{ order.createTime }}
                  </div>
                </div>
                <div>
                  <a-button v-if="order.orderStatus == 3 || order.orderStatus == 5" @click="delOrder(order.orderSn)"
                            type="primary" size="small" danger>删除订单
                  </a-button>
                  <span style="margin-left: 20px"> {{ unitPrice(order.actualPrice, '￥', '') }}</span>
                </div>
              </div>
              <div class="order-body">
                <div class="goods-list">
                  <div
                      v-for="(goods, goodsIndex) in order?.goodsList"
                      :key="goodsIndex"
                  >
                    <img
                        @click="goodsDetail(goods.goodsId)"
                        class="hover-color"
                        :src="getFileAccessHttpUrl(goods.goodsImage)"
                        alt=""
                    />
                    <div>
                      <div class="hover-color" @click="goodsDetail(goods.goodsId)">{{
                          goods.goodsName
                        }}
                      </div>
                      <div class="mt_10 mb_10">
                        <span class="global_color">{{ unitPrice(goods.purchasePrice, '￥', '') }}</span> x {{
                          goods.number
                        }}
                      </div>
                      <a-button @click="comment(order.orderSn, goods.id)"
                                size="small"
                                class="fontsize_12"
                                v-if="order.orderStatus == 1 && goods.commentStatus != 1"
                                type="primary">评价
                      </a-button>
                      <a-tag v-if="goods.commentStatus == 1">已评价</a-tag>
                    </div>
                  </div>
                </div>
                <div>
                </div>
                <div>
                  <!-- 订单基础操作 -->
                  <a-button type="primary" @click="orderDetail(order.orderSn)" size="small" danger class="ivu-btn">
                    订单详情
                  </a-button>
                  <a-button type="primary" @click="handleCancelOrder(order.orderSn)"
                            size="small" v-if="order.orderStatus == 0" danger class="ivu-btn">
                    取消订单
                  </a-button>
                  <a-button type="primary" @click="goPay(order.orderSn)" size="small" v-if="order.orderStatus == 0"
                            class="ivu-btn">去支付
                  </a-button>
                  <a-button type="primary" @click="router.push(`/userCenter/myOrder/refund/${order.orderSn}`);"
                            size="small"
                            v-if="order.orderStatus == 1 || order.orderStatus == 2 || order.orderStatus == 6"
                            class="ivu-btn">
                    退款
                  </a-button>
                </div>
              </div>
            </div>
          </div>
        </a-spin>
        <div class="page-size">
          <Pagination :pageNo="pageInfo.pageNo" :pageSize="pageInfo.pageSize" :total="total"
                      @change-page="changePage"/>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
import {cancelOrder, deleteOrder, getOrderList} from '@/api/order';
import {onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {useMessage} from "@/hooks/web/useMessage";
import EmptyData from "@/components/public/EmptyData.vue";
import {unitPrice} from "@/utils";
import Pagination from "@/components/Pagination.vue";
import {getFileAccessHttpUrl} from "@/utils/compUtils";

const router = useRouter();

const activeKey = ref('1');

const tabCards = [
  {
    key: "1",
    name: "全部订单",
    orderStatus: ""
  },
  {
    key: "2",
    name: "待付款",
    orderStatus: "0"
  },
  {
    key: "3",
    name: "待评价",
    orderStatus: "1"
  },
  {
    key: "4",
    name: "已完成",
    orderStatus: "2"
  },
]
const {createMessage} = useMessage();
const {createConfirm} = useMessage();

const orderList = ref([]) // 订单列表
const pageInfo = reactive({ // 请求参数
  pageNo: 1,
  pageSize: 10,
  orderSn: '',
  orderStatus: ''
})

const total = ref<any>(0) // 数据总数
const spinShow = ref<boolean>(false) // 加载状态

function handleClick(tab) {
  pageInfo.pageNo = 1
  const tabPane = tabCards.filter(item => item.key == tab)[0]
  if (tabPane) {
    pageInfo.orderStatus = tabPane.orderStatus
  }
  listOrder();
}

onMounted(() => {
  listOrder()
})

function goodsDetail(goodsId) {
  // 跳转商品详情
  let routeUrl = router.resolve({
    path: `/mall/goods/detail/${goodsId}`,
  });
  window.open(routeUrl.href, '_blank');
}

// 跳转店铺首页
function shopPage(id) {
  let routeUrl = router.resolve({
    path: '/Merchant',
    query: {id: id}
  });
  window.open(routeUrl.href, '_blank');
}

function orderDetail(orderSn) {
  // 跳转订单详情
  router.push(`/userCenter/myOrder/orderDetail/${orderSn}`);
}

function goPay(sn) { // 去支付
  router.push(`/mall/thirdPay/${sn}`);
}

function comment(orderSn, orderGoodsId) { // 评价
  router.push(`/userCenter/myOrder/addEval/${orderSn}/${orderGoodsId}`)
}

function delOrder(orderSn) { // 删除订单
  createConfirm({
    iconType: "warning",
    title: "删除订单",
    content: "确认删除当前订单吗?",
    okText: "确认",
    cancelText: "取消",
    onOk: async () => {
      await deleteOrder(orderSn)
      createMessage.success('删除成功');
      listOrder()
    }
  });
}

async function listOrder() { // 获取订单列表
  spinShow.value = true;
  try {
    const res: any = await getOrderList(pageInfo)
    orderList.value = res.result?.records;
    total.value = res.result?.total;
  } finally {
    spinShow.value = false
  }
}

function handleCancelOrder(orderSn) {
  createConfirm({
    iconType: "warning",
    title: "取消订单",
    content: "确认取消当前订单吗?",
    okText: "确认",
    cancelText: "取消",
    onOk: async () => {
      await sureCancel(orderSn)
      listOrder()
    }
  });
}

async function sureCancel(orderSn) { // 确定取消
  await cancelOrder(orderSn)
  createMessage.success('取消订单成功')
  listOrder()
}

function changePage(pageNo) {
  pageInfo.pageNo = pageNo
  listOrder();
}
</script>

<style scoped lang="scss">
@import "@/assets/style/course/global.scss";

.wrapper {
  margin-bottom: 40px;
}

.box {
  overflow: hidden;
}

.page-size {
  margin: 15px 0px;
  text-align: right;
}

/** 订单列表 */
.order-list {
  border: 1px solid #ddd;
  border-radius: 3px;
  margin-bottom: 10px;

  &:hover {
    .del-btn {
      visibility: visible;
    }
  }

  .del-btn {
    visibility: hidden;
  }

  .order-header {
    display: flex;
    align-items: center;
    padding: 10px;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;

    > div:nth-child(1) > div:nth-child(2) {
      color: #999;
      margin-top: 3px;
    }
  }

  .order-body {
    display: flex;
    justify-content: space-between;
    color: #999;
    padding: 10px;

    .goods-list > div {
      width: 500px;
      display: flex;
      margin-bottom: 10px;

      img {
        width: 60px;
        height: 60px;
        margin-right: 10px;
      }

      > div {
        flex: 1;
      }
    }

    > div:nth-child(2) {
      width: 350px;
      font-size: 12px;

      span {
        color: #438cde;
        cursor: pointer;

        &:hover {
          color: red;
        }
      }

      .ivu-icon {
        color: #ff8f23;
        cursor: pointer;

        &:hover {
          color: red;
        }
      }
    }

    > div:nth-child(3) {
      width: 100px;

      .ivu-btn {
        margin-bottom: 10px;
      }
    }
  }
}


</style>
